import { Directive, ElementRef, Input, OnInit, Output, EventEmitter } from '@angular/core';
declare var $: any;

@Directive({ selector: '[zeditor]' })
export class ZeditorDirective implements OnInit {

  @Output() onGetJSON = new EventEmitter();
  @Input('zeditor') toolHeightScale: number;
  @Input('supportImg') upLoadURL: string = '';
  @Input() initData: any;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    let _this = this;
    let box = this.el.nativeElement;
    let editor = box.querySelector('.editor');
    let selectBtn = this.upLoadURL ? ['paragraph', 'title', 'link', 'image', 'center', 'fullScreen', 'importantParagraph', 'clearAll']
                                   : ['paragraph', 'title', 'link', 'center', 'fullScreen', 'importantParagraph', 'clearAll'];
    let zeditor = $(editor).zeditor({
      'selectBtn': selectBtn,
      'upLoadURL': _this.upLoadURL,
      'toolHeightScale': _this.toolHeightScale || 0.18, // 工具条比例，默认0.18
      'setData': _this.initData ? JSON.parse(_this.initData) : {}
    });

    let btn = box.querySelector('.zeditor-submit-btn');
    btn.onclick = function() {
      _this.onGetJSON.emit(zeditor.getJsonString());
    }
  }
}
